<template>
  <div class="card">
    <fx-card title="基础用法">
      <fx-card>
        <template #title>
          <div class="title" style="display:flex;justify-content:space-between;">
            <span>卡片名称</span>
            <fx-button type="text" class="fs12">操作</fx-button>
          </div>
        </template>
        <ul class="list">
          <li>列表内容1</li>
          <li>列表内容2</li>
          <li>列表内容3</li>
          <li>列表内容4</li>
        </ul>
      </fx-card>
      <template #hide>
        <pre v-highlight="base"><code></code></pre>
      </template>
    </fx-card>
    <fx-card title="简单用法">
      <fx-card>
        <ul class="list">
          <li>列表内容1</li>
          <li>列表内容2</li>
          <li>列表内容3</li>
          <li>列表内容4</li>
        </ul>
      </fx-card>
      <template #hide>
        <pre v-highlight="simple"><code></code></pre>
      </template>
    </fx-card>
    <fx-card title="取消padding">
      <fx-card :is-padding="false" :content-style="{display:'flex',width:'200px'}" :card-style="{width: 'fit-content'}">
        <div class="pic">
          <img src="../../assets/logo.jpg" alt="logo">
          <div class="content" style="padding: 5px 10px;">
            <h3>海贼王-路飞</h3>
            <p style="display:flex;justify-content:space-between;align-items: center">
              <span class="fs12">{{ new Date().getFullYear() }}</span>
              <fx-button type="text">操作</fx-button>
            </p>
          </div>
        </div>
      </fx-card>
      <template #hide>
        <pre v-highlight="padding"><code></code></pre>
      </template>
    </fx-card>
    <fx-card title="隐藏内容">
      <fx-card>
        点击展开详情
        <template #hide>
          <p style="padding: 20px;">这里填入详情内容</p>
        </template>
      </fx-card>
      <template #hide>
        <pre v-highlight="hide"><code></code></pre>
      </template>
    </fx-card>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  name: 'viewCard',
  setup () {
    const base = `<fx-card>
  <template #title>
    <div class="title" style="display:flex;justify-content:space-between;">
      <span>卡片名称</span>
      <fx-button type="text" class="fs12">操作</fx-button>
    </div>
  </template>
  <ul class="list">
    <li>列表内容1</li>
    <li>列表内容2</li>
    <li>列表内容3</li>
    <li>列表内容4</li>
  </ul>
</fx-card>`
    const simple = `<fx-card>
  <ul class="list">
    <li>列表内容1</li>
    <li>列表内容2</li>
    <li>列表内容3</li>
    <li>列表内容4</li>
  </ul>
</fx-card>`
    const padding = `<fx-card :is-padding="false" :content-style="{display:'flex',width:'200px'}" :card-style="{width: 'fit-content'}">
  <div class="pic">
    <img src="../../assets/logo.jpg" alt="logo">
    <div class="content" style="padding: 5px 10px;">
      <h3>海贼王-路飞</h3>
      <p style="display:flex;justify-content:space-between;align-items: center">
        <span class="fs12">{{ new Date().getFullYear() }}</span>
        <fx-button type="text">操作</fx-button>
      </p>
    </div>
  </div>
</fx-card>`
    const hide = `<fx-card>
  点击展开详情
  <template #hide>
    这里填入详情内容
  </template>
</fx-card>`

    return {
      base,
      simple,
      padding,
      hide
    }
  }
})
</script>

<style scoped lang="scss">
.card {
  .list {
    > li {
      height: 32px;
      line-height: 32px;
    }
  }

  .pic {
    width: 200px;

    > img {
      width: 100%;
    }
  }
}
</style>
